<!-- 科室---下拉框 -->
<template>
  <px-form-item label="科室" prop="className" :rules="[{ required: isRequired, message: '请选择科室', trigger: 'change' }]">
    <px-select
      v-model="checkGroupVal"
      :disabled="disabled"
      clearable
      filterable
      placeholder="请先选择厂区"
      style="width: 100%"
      @change="changeCheckGroup"
    >
      <px-option v-for="item in checkGroupList" :key="item.id" :label="item.name" :value="item.value" />
    </px-select>
  </px-form-item>
</template>

<script setup lang="ts">
import { queryCurrentClassList } from "@/api/common";
import { onMounted, ref, watch } from "vue";

// 父级方法和值
const emits = defineEmits(["changeCheckGroup"]);
const props = defineProps(["checkGroup", "isRequired", "disabled"]);

const checkGroupVal = ref("");
const checkGroupList = ref([]);

watch(
  () => props.checkGroup,
  val => {
    checkGroupVal.value = props.checkGroup;
  },
  { immediate: true }
);
onMounted(() => {
  queryCheckGroupSelect();
});
// 获取科室下拉列表
const queryCheckGroupSelect = async () => {
  const tempCheckGroupList = await queryCurrentClassList();
  checkGroupList.value = tempCheckGroupList || [];
};
// 改变地块值，传值给父级并做改变
const changeCheckGroup = () => {
  emits("changeCheckGroup", checkGroupVal.value);
};
</script>
